<template>
  <div class="container">
    <el-card class="filter">
      <filter-group :filters="FILTERS" :btns="BTNS" @onBtnClick="onBtnClickGroup" />
      <el-alert :title="`数据一共${total}条`" type="info" show-icon :closable="false"> </el-alert>
    </el-card>
    <custom-table
      :columns="TABLE_CLOUMNS"
      :table-props="{ data: list, border: true }"
      :pagination-props="{
        total: total,
        pageSize: params.size,
        currentPage: params.page,
        background: true
      }"
      @onEvent="onEvent"
    />
    <!-- 新增学科弹框 -->
    <el-dialog title="新增学科" :visible.sync="dialogVisible" width="30%" @close='onClose'>
      <!-- to fix: 变量单词拼写错误 命名规则混乱 -->
      <el-form ref="fromAdd" :model="from" :rules="fromRules" label-width="80px">
        <el-form-item label="学科名称" prop="subjectName">
          <el-input v-model="from.subjectName"></el-input>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch v-model="from.isFrontDisplay" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSubjectapp">确 定</el-button>
      </span>
    </el-dialog>
     <!-- 编辑学科弹框 -->
    <el-dialog title="编辑学科" :visible.sync="editDialogVisible" width="30%">
      <el-form ref="from" :model="fromEdit" :rules="fromRules" label-width="80px">
        <el-form-item label="学科名称" prop="subjectName">
          <el-input v-model="fromEdit.subjectName"></el-input>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch v-model="fromEdit.isFrontDisplay" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSubjectapp">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import TableMixin from '@/mixins/table.js'
import FilterGroup from '@/mixins/filter-group.js'
import { TABLE_CLOUMNS, BTNS, FILTERS } from '../constants/subjects.js'
import { mapState, mapActions } from 'vuex'
export default {
  mixins: [
    TableMixin,
    FilterGroup
  ],
  data () {
    return {
      params: {
        subjectName: '',
        page: 1,
        pagesize: 10
      },
      TABLE_CLOUMNS, // to fix: cloumns >>>> columns
      BTNS,
      FILTERS,
      // 控制新增学科弹出框
      dialogVisible: false,
      // 弹出框表单数据
      from: {
        subjectName: '',
        isFrontDisplay: true
      },
      // 弹出框表单规则
      fromRules: {
        subjectName: [{ required: true, message: '用户姓名不能为空', trigger: 'blur' }, {
          min: 1, max: 4, message: '用户姓名为1-4位' // to fix: 换行规则混乱
        }]
      },
      // 控制编辑学科弹出框
      editDialogVisible: false,
      // 编辑弹出框表单数据
      fromEdit: {
        id: '',
        subjectName: '',
        isFrontDisplay: true
      }
    }
  },
  mounted () {
    // 清空搜索框
    // this.onEmpty()
  },
  // to fix: 清空逻辑写在beforeDestroy
  beforeDestroy () {
    this.onEmpty()
  },
  computed: {
    ...mapState('Subjectapp', [
      'list',
      'total'
    ])
  },
  methods: {
    ...mapActions('Subjectapp', [
      'updatelist', // 变量驼峰命名
      'updateadd',
      'updatedel',
      'updateaedit'
    ]),
    // 筛选按钮点击事件
    onBtnClickGroup (btnkey, params) {
      console.log(btnkey)
      switch (btnkey) {
        case 'search':
          this.onSearch(params)
          break
        case 'delete':
          this.onEmpty()
          break
        case 'addSubject':
          this.onAddSubject()
          break
        default:
          console.error('不受支持的事件类型')
      }
    },
    // 点击搜索按钮
    onSearch () {
      this.params.subjectName = FILTERS[0].value
      this.updatelist(this.params)
    },
    // 清空搜索框
    onEmpty () {
      this.FILTERS[0].value = ''
    },
    // 新增学科
    // to fix: 相似逻辑的代码 写法要相同
    onAddSubject () {
      // 显示弹出层
      this.dialogVisible = true
    },
    // 点击新增确定按钮
    async addSubjectapp () {
      await this.updateadd({
        id: null,
        subjectName: this.from.subjectName,
        isFrontDisplay: this.isFrontDisplay ? 1 : 0
      })
      // 请求成功重新渲染页面
      this.updatelist(this.params)
      // 关闭弹出框
      this.dialogVisible = false
    },
    // 表格所有按钮点击事件
    onBtnClick (bntkey, ...args) {
      switch (bntkey) {
        case 'correct':
          this.onEditSubject(...args)
          break
        case 'delete':
          this.onDelSubject(...args)
          break
        case 'classify':
          this.onJumpCategory(...args)
          console.log(...args) // to fix: 提交之前清空所有的console
          break
        case 'label':
          this.onJumpcatalogue(...args)
          console.log(...args)
          break
        default:
          break
      }
    },
    // 点击跳转标签页面
    onJumpcatalogue (data) {
      this.$router.push({ path: '/subjects/tags', query: { id: data.id, name: data.subjectName } })
    },
    // 点击跳转目录页面
    onJumpCategory (data) {
      console.log(data)
      this.$router.push({ path: '/subjects/directorys', query: { id: data.id, name: data.subjectName } })
    },
    onEditSubject (data) {
      // 把学科的数据给编辑弹出框
      this.fromEdit.subjectName = data.subjectName
      this.fromEdit.isFrontDisplay = data.isFrontDisplay === '是'
      this.fromEdit.id = data.id
      // 显示弹出框
      this.editDialogVisible = true
    },
    // 点击编辑确定按钮
    async editSubjectapp () {
      await this.updateaedit({
        id: this.fromEdit.id,
        subjectName: this.fromEdit.subjectName,
        isFrontDisplay: this.fromEdit ? 1 : 0
      })
      // 请求成功重新渲染页面
      this.updatelist(this.params)
      // 关闭弹出框
      this.editDialogVisible = false
    },
    // 点击删除按钮
    onDelSubject (data) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 请求服务器删除学科
        await this.updatedel(data)
        // 请求成功重新渲染页面
        this.updatelist(this.params)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 关闭对话框
    // to fix: ??????????????
    onClose () {
      this.$refs.fromAdd.resetFields()
    }

  }

}
</script>

<style scoped lang='less'></style>
